<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import historyItem from './components/historyItem.vue';

const { t } = useI18n();
</script>

<template>
  <div class="history">
    <div class="history_header">
      <div class="history_header_title">
        {{ t('History.title') }}
      </div>
    </div>
    <el-scrollbar view-class="h-full" class="flex-1">
      <historyItem v-for="item in 10" :key="item" />
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.history {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .history_header {
    flex-shrink: 0;
    padding: 1rem;

    .history_header_title {
      font-weight: bold;
      font-size: 1.6rem;
    }
  }

  .history_main {
    flex: 1;
  }
}
</style>
